<template>
    <Card>
        <p slot="title">技师报警</p>
        <div class="search-con search-con-top">
            技师信息：
            <Input v-model="search.search" placeholder="名称、手机号" style="width: 200px"></Input>
            <!-- 处理状态：
            <Select style="width:200px" v-model="search.status">
                <Option :value="0">未处理</Option>
                <Option :value="1">已处理</Option>
            </Select> -->
            <Button type="primary" icon="ios-search" style="margin-left: 10px;" @click="getList">搜索</Button>
            <Button @click="reset" type="success" icon="ios-refresh" style="margin-left: 10px;">刷新</Button>
            <Button slot="extra" @click="delSos(false)" type="warning" style="margin-left: 10px;">批量删除</Button>
        </div>
        <Table :columns="columns" :data="list" ref="selection" border style="margin-top: 10px;"
            @on-selection-change="tableSelect">
            <template slot-scope="{ row , index}" slot="imgSlot">
                <div>
                    <audio controls ref="audio" class="aud" :src="baseImgeUrl + row.file">
                    </audio>
                    <!-- <a style="color: blue;font-size: 15px;text-decoration:underline;cursor:pointer;"
                        :href="baseImgeUrl + row.file" target="_blank">查看文件</a> -->
                </div>
            </template>
            <template slot-scope="{ row , index}" slot="statusSlot">
                <!-- <i-switch size="large" @on-change="statusChange(row.id, row.status)" :value="!row.status">
                    <span slot="open" >未处理</span>
                    <span slot="close" >已处理</span>
                </i-switch> -->
                <i-button type="error" size="small" @click="delSos(row.id)" style="margin-left: 20px;">删除</i-button>
            </template>
        </Table>
        <br>

        <Page :total="total" show-sizer show-total show-elevator @on-change="changePage" @on-page-size-change="changeSize" :page-size-opts="pageSize" :page-size="search.limit">
        </Page>
        <Modal v-model="imgShow" width="330px" :closable="false">
            <img :src="imgShowUrl" style="width: 300px;">
        </Modal>
    </Card>
</template>
  
<script>
import config from "@/config";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
    name: "technicianSos",
    data() {
        return {
            pageSize:[20,50,80,100,200],
            baseUrl: baseUrl,
            baseImgeUrl: baseImgeUrl,
            action_url: baseUrl + "/admin/image/uploadImg",
            // 列表
            columns: [
                {
                    type: 'selection',
                    align: "center",
                    width: 60,
                    align: 'center'
                },
                {
                    title: '技师姓名',
                    align: "center",
                    width: "120",
                    key: 'tech_username',
                },
                {
                    title: '技师手机号',
                    align: "center",
                    width: "120",
                    key: 'tech_mobile',
                },
                {
                    title: '报警地点',
                    align: "center",
                    key: 'address',
                },
                {
                    title: '报警时间',
                    align: "center",
                    width: "160",
                    key: 'create_time',
                },
                {
                    title: '订单号',
                    align: "center",
                    width: "160",
                    key: 'order_sn',
                },
                {
                    title: '音频文件',
                    align: "center",
                    slot: 'imgSlot',
                    width: "300"
                },
                {
                    title: '状态',
                    align: "center",
                    key: 'is_auth',
                    slot: "statusSlot",
                    width: "120"
                },
            ],
            // 数据
            list: [],
            total: 0,
            imgShow: false,
            imgShowUrl: '',
            search: {
                search: "",
                start_time: "",
                end_time: "",
                page: 1,
                limit: 20
            },

            showPaymentInfo: false,
            imgArr: [],
            tableSelectIdArr: [],
        }
    },
    methods: {
        // 查询技师信息
        getList() {
            this.$axios('/admin/tec/techSosList', this.search).then(res => {
                this.list = res.data;
                this.total = res.total;
            });
        },
        searchs() {
            this.search.page = 1;
            this.getList();
        },
        reset() {
            this.search = {
                page: 1,
                limit: 20
            };
            this.getList();
        },
        changePage(page) {
            this.search.page = page;
            this.getList();
        },
        changeSize(size) {
            this.search.limit = size;
            this.getList();
        },
        showImg(url) {
            this.imgShow = true;
            this.imgShowUrl = url;
        },
        showImgDao(row) {
            this.showPaymentInfo = true;
            this.imgArr = row.img;
        },
        statusChange(id, status) {
            this.$axios('/admin/tec/sosStatusChange', { id: id, status: status }).then(res => {
                this.getList();
            });
        },
        tableSelect(selection) {
            let arr = [];
            selection.forEach(item => {
                arr.push(item.id);
            });
            this.tableSelectIdArr = arr;
        },
        delSos(id) {
            let idArr = [];
            if (id) {
                idArr.push(id);
            } else {
                idArr = this.tableSelectIdArr;
            }
            if (idArr.length == 0) {
                this.$Message.error('请选择要删除的数据');
                return;
            }
            this.$Modal.confirm({
                title: '删除',
                content: "<p>您确定要删除吗？</p>",
                onOk: () => {
                    this.$axios('/admin/tec/delSos', { id: idArr }).then(res => {
                        this.$Message.success('删除成功');
                        this.getList();
                    });
                },
                onCancel: () => {
                    this.$Message.info('取消操作');
                }
            });
        },
    },
    created() {
        this.getList();
    }
}
</script>
<style>
.ivu-table-cell {
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
  